<template>
  <div class="ear-muff">
    <el-card class="sur-card">
      <div class="sur-card-title" slot="header">
        <span
          >规格名[<span style="color: red;">{{ skuName }}</span
          >]的模板列表</span
        >
        <!--        <el-button type="text" @click="onAddTemplate">添加模板</el-button>-->
      </div>
      <el-row>
        <div class="search-section">
          <el-form :inline="true">
            <el-form-item>
              <el-input
                style="width: 220px;"
                size="small"
                v-model="pageVo.title"
                placeHolder="请输入模板标题,支持模糊"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                size="small"
                v-model="pageVo.sampleCode"
                placeHolder="请输入模板编码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button size="small" icon="el-icon-search" @click="onSearch"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  icon="el-icon-refresh"
                  @click="onClearSearchForm"
                  >刷新</el-button
                >
              </el-button-group>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="danger" @click="onAddTemplate"
                >添加样本</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-row>
      <el-tabs v-model="pageVo.styleId" type="card" @tab-click="onTabClick">
        <el-tab-pane
          :label="tab.name"
          :name="tab.id"
          v-for="tab in styleList"
          :key="tab.id"
        >
        </el-tab-pane>
      </el-tabs>
      <div class="list-group">
        <div
          class="list-group-item"
          v-for="sample in templates"
          :key="sample.id"
        >
          <div style="position: relative;">
            <div
              style="font-size: 14px;text-align: center;overflow: hidden;max-width: 150px;white-space: nowrap;"
            >
              {{ sample.title }}
            </div>
            <el-image
              :src="sample.effectImg"
              fit="contain"
              class="image-item"
              :preview-src-list="Array.of(sample.effectImg)"
            >
            </el-image>
            <div class="hover-mask">
              <el-button
                type="text"
                v-if="sample.editable"
                @click="onEditTemplate(sample)"
                >编辑</el-button
              >
              <el-button type="text" @click="onDeleteTemp(sample)"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <el-row>
        <el-pagination
          class="page-section"
          background
          @current-change="onPaging"
          :page-size="pageVo.size"
          @size-change="handleSizeChange"
          :page-sizes="[20, 50, 100, 200]"
          layout="total,sizes,prev, pager, next"
          :total="pageVo.total"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getSampleStyleByPage } from "@/api/admin-api/SampleStyleApi";
import {
  deleteTemplate,
  getEarMuffTemplates
} from "@/api/admin-api/DiyEarMuffApi";

export default {
  name: "EarMuffTemplate",
  props: {
    skuName: [],
    skuId: []
  },
  data() {
    return {
      pageVo: {
        current: 1,
        size: 20,
        total: 0, //总数量
        pages: 0, //总页数
        orders: [{ column: "sort" }], //排序字段
        styleId: undefined,
        skuId: undefined,
        title: undefined,
        sampleCode: undefined
      },
      templates: [], //模板列表
      styleList: [], //风格列表
      makeCanvasVisible: true
    };
  },
  methods: {
    onDeleteTemp(temp) {
      this.$confirm("确定要删除当前模板吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        deleteTemplate(temp.id).then(() => {
          this.$message.success("操作成功");
          this.loadTemplates();
        });
      });
    },
    onEditTemplate(temp) {
      window.open(
        "/diy/ear_muff/edit_template?sku_id=" +
          this.skuId +
          "&sku_name=" +
          this.skuName +
          "&temp_id=" +
          temp.id,
        "_blank"
      );
    },
    onPaging(currentPage) {
      // 页码改变
      this.pageVo.current = currentPage;
      this.loadTemplates();
    },
    handleSizeChange(val) {
      //页大小改变
      this.pageVo.size = val;
      this.pageVo.current = 1;
      this.loadSampleList();
    },
    onSearch() {
      this.loadTemplates();
    },
    loadTemplates() {
      this.loadingTable = true;
      getEarMuffTemplates(this.pageVo)
        .then(data => {
          console.log("data", data);
          this.templates = data.records;
          this.pageVo.current = data.current;
          this.pageVo.pages = data.pages;
          this.pageVo.total = Number(data.total);
          this.loadingTable = false;
        })
        .catch(() => {
          this.loadingTable = false;
        });
    },
    onClearSearchForm() {
      this.pageVo.sampleCode = undefined;
      this.pageVo.title = undefined;
      this.loadTemplates();
    },
    onAddTemplate() {
      window.open(
        "/diy/ear_muff/edit_template?sku_id=" +
          this.skuId +
          "&sku_name=" +
          this.skuName,
        "_blank"
      );
    },
    onTabClick(tab) {
      // this.pageVo.editable = tab.name;
      console.log("tab", tab.name);
      this.loadTemplates();
    },
    async loadStyleList() {
      return new Promise(resolve => {
        getSampleStyleByPage({
          size: 100,
          type: "DIY_EAR_MUFF",
          orders: [{ column: "sort" }]
        }).then(data => {
          resolve(data.records);
        });
      });
    }
  },
  async mounted() {
    this.styleList = await this.loadStyleList();
    this.pageVo.styleId = this.styleList[0].id;
    this.pageVo.skuId = this.skuId;
    this.loadTemplates();
  }
};
</script>

<style scoped>
.ear-muff {
}
.list-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.list-group-item {
  margin-left: 15px;
  margin-bottom: 15px;
  display: inline-block;
}
.image-item {
  width: 150px;
  height: 150px;
  border-radius: 8px;
}
.hover-mask {
  text-align: center;
  /*position: absolute;*/
  /*background-color: #42b983;*/
}
</style>
